<template>
	<view>
		<view :style="{width: width + 'rpx', height: height + 'rpx'}" v-show="!isDone" class="mask"></view>
		<image :src= "src" :style="{width: width + 'rpx', height: height + 'rpx'}" @load="isDone=true"/>
	</view>
</template>

<script>
	export default {
		name:"ugo-image",
		props: {
			src: {type: String, required: true},
			width: { type: Number, default: 120 },
			height: { type: Number, default: 120 },
		},
		data() {
			return {
				isDone: false
			};
		}
	}
</script>

<style scoped>
.mask {
	background-color: rgba(0, 0, 0, 0.5);
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.mask::before {
	content: '';
	position: absolute;
	top: -30rpx;
	transform: rotate(45deg);
	left: -100%;
	width:5%;
	height: 200%;
	background-color: rgba(255,255,255,1);
	animation: skeleton-animation 0.9s infinite;
}
@keyframes skeleton-animation {
	0%{ left: -150%; }
	100%{ left: 150%; }
}
</style>